<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>PrimeFaces Rio Promotional Landing Page</title>

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

        <style>
            #menu-button{height:25px; width:25px; float:left; display:block; text-align:center; cursor:pointer; margin-left:20px;}
            #menu-button i{color:#fff; font-size:20px; margin:6px auto 0px auto; vertical-align:middle;}
            #menu-button:hover i, #menu-button:active i, #menu-button:focus i{color:rgba(255,255,255,0.7);}
            #menubody{width:280px; height:auto; background-color:#fff; position:absolute; overflow:hidden; border-radius:5px; margin-top:30px; display:none;
                      box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
                      -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
                      -moz-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);}
            #menubody.active{display:block;}
            #menubody li{display:block; padding:0px;}
            #menubody li a{display:block; padding:15px 20px; color:#567a84; font-size:16px;}
            #menubody li a:hover, #menubody li a:active, #menubody li a:focus{background-color:#f2f2f2;}
        </style>
    </h:head>
    <h:body class="BlueBody PopupMenu" style="margin: 0px; background-color:#fff;">
        <h:outputStylesheet library="rio-layout" name="css/core-layout.css"/>
        <h:outputStylesheet library="rio-layout" name="css/animate.css"/>
        <h:outputStylesheet library="rio-layout" name="css/rio-font.css"/>
        <!--<h:outputStylesheet library="rio-layout" name="css/ripple-effect.css"/>-->
        <!--<h:outputStylesheet library="rio-layout" name="css/perfect-scrollbar.css"/>-->
        <!--<h:outputStylesheet library="rio-layout" name="#{themeView.layoutCss}"/>-->
        <h:outputStylesheet library="rio-layout" name="css/rio-layout.css"/>

        <div class="Container100 PosFixed BlueBack FontRobotoRegular" style="z-index:999;">
            <div class="EmptyBox20"/>
            <div class="Wid90 OvHidden MarAuto">
                <img src="#{resource['rio-layout:images/logo.svg']}" style="height:25px; float:left;" />

                <a id="menu-button"><i class="fa fa-bars"/></a>
                <ul class="" style="padding:0px;" id="menubody">
                    <li class=""><a href="dashboard.xhtml" class="">Rio Dashboard</a></li>
                    <li class=""><a href="#rio-highlight" class="">Promotion Page Slogan</a></li>
                    <li class=""><a href="#rio-cardsArea" class=""> How It Works</a></li>
                    <li class=""><a href="#rio-infoArea" class=""> Try Now !</a></li>
                    <li class=""><a href="#rio-pricingtables" class="">Pricing Tables</a></li>
                    <li class=""><a href="#rio-features" class="">Features</a></li>
                    <li class=""><a href="#rio-customers" class="">Customers</a></li>
                    <li class=""><a href="#rio-contact" class="">Contact</a></li>
                </ul>
            </div>
            <div class="EmptyBox20"/>
        </div>

        <!-- -->

        <div class="Container100 BlueBack" id="rio-highlight" style="padding:10rem 0px;">

            <div class="Wid90 OvHidden MarAuto">
                <div class="Container100">
                    <div class="EmptyBox90"/>
                    <h1 class=" FontRobotoBold Fs50 WhiteBlue TexAlCenter">YOUR APPLICATION SLOGAN COMES HERE</h1>
                    <div class="EmptyBox20"/>
                    <span class="DispBlock Fs24 FontRobotoLight White TexAlCenter">“ You can use this page as a promotion page template for your application.<br />
                        So your web application and promotion website of application will work in complete harmony. ”</span>
                    <div class="EmptyBox40"/>
                    <div class="Wid50 MarAuto ui-fluid Responsive100">
                        <div class="Container50 Responsive100">
                            <div class="ContainerIndent">
                                <p:commandButton value="Create Free Account" styleClass="GreenButton Fs18"/>
                            </div>
                        </div>
                        <div class="Container50 Responsive100">
                            <div class="ContainerIndent">
                                <p:commandButton value="Learn More" styleClass="RedButton Fs18"/>
                            </div>
                        </div>
                    </div>

                    <div class="EmptyBox20 ShowOnMobile"/>
                    <div class="EmptyBox120 ShowOnDesktop"/>
                </div>
            </div>
        </div>

        <!-- -->

        <div class="Container100 " id="rio-cardsArea" style="background-color:#F0F2F5; padding:0px 3rem; box-sizing:border-box;">

            <div class="EmptyBox80"/>

            <h1 class="FontRobotoRegular Fs30 BoldGray TexAlCenter">How It Works ?</h1>
            <div class="EmptyBox30"/>

            <div class="Wid90 OvHidden MarAuto">
                <div class="Container100">

                    <div class="Container50 Responsive50">
                        <div class="ContainerIndent">
                            <i class="icon-comments SoftRed Fs60 DispBlock Fleft"/>
                            <div class="Container10 Responsive50"><div class="ContainerIndent"></div></div>
                            <div class="Container70 Responsive50">
                                <h2 class="BoldGray FontRobotoRegular Fs30">1. Store Stats</h2>
                                <div class="EmptyBox10"/>
                                <h3 class="BoldGray FontRobotoLight Fs20">Monitor the app ecosystem and your competitors.</h3>
                                <div class="EmptyBox20"/>
                                <span class="BoldGray Fs14 FontRobotoLight">Vitae potenti ante praesent a dui eget nibh eu quam accumsan porttitor tincidunt
                                    ultrices vel auctor aenean placerat viverra ac vel parturient tristique malesuada hac
                                    conubia sed tincidunt.Quisque a imperdiet suspendisse parturient adipiscing justo sem a
                                    in eros eros luctus a turpis urna sapien ullamcorper vulputate at mi.Dis vestibulum vel
                                    lectus sed vestibulum consectetur vivamus a feugiat pharetra fames ullamcorper adipiscing
                                    condimentum tempor egestas at at lacus.</span>
                                <div class="EmptyBox30"/>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Learn More" styleClass="GreenButton Fleft"/>
                                    </div>
                                </div>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Try Now" styleClass="CyanButton Fleft"/>
                                    </div>
                                </div>
                            </div>
                            <div class="EmptyBox30"/>
                        </div>
                    </div>

                    <div class="Container50 Responsive50">
                        <div class="ContainerIndent">
                            <i class="icon-inbox SoftRed Fs60 DispBlock Fleft"/>
                            <div class="Container10 Responsive50"><div class="ContainerIndent"></div></div>
                            <div class="Container70 Responsive50">
                                <h2 class="BoldGray FontRobotoRegular Fs30">2. Server Stats Pro</h2>
                                <div class="EmptyBox10"/>
                                <h3 class="BoldGray FontRobotoLight Fs20">Monitor the app ecosystem and your competitors.</h3>
                                <div class="EmptyBox20"/>
                                <span class="BoldGray Fs14 FontRobotoLight">Vitae potenti ante praesent a dui eget nibh eu quam accumsan porttitor tincidunt
                                    ultrices vel auctor aenean placerat viverra ac vel parturient tristique malesuada hac
                                    conubia sed tincidunt.Quisque a imperdiet suspendisse parturient adipiscing justo sem a
                                    in eros eros luctus a turpis urna sapien ullamcorper vulputate at mi.Dis vestibulum vel
                                    lectus sed vestibulum consectetur vivamus a feugiat pharetra fames ullamcorper adipiscing
                                    condimentum tempor egestas at at lacus.</span>
                                <div class="EmptyBox30"/>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Learn More" styleClass="GreenButton Fleft"/>
                                    </div>
                                </div>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Try Now" styleClass="CyanButton Fleft"/>
                                    </div>
                                </div>
                            </div>
                            <div class="EmptyBox30"/>
                        </div>
                    </div>

                    <div class="Container50 Responsive50">
                        <div class="ContainerIndent">
                            <i class="icon-store SoftRed Fs60 DispBlock Fleft"/>
                            <div class="Container10 Responsive50"><div class="ContainerIndent"></div></div>
                            <div class="Container70 Responsive50">
                                <h2 class="BoldGray FontRobotoRegular Fs30">3. Store Statistics</h2>
                                <div class="EmptyBox10"/>
                                <h3 class="BoldGray FontRobotoLight Fs20">Monitor the app ecosystem and your competitors.</h3>
                                <div class="EmptyBox20"/>
                                <span class="BoldGray Fs14 FontRobotoLight">Vitae potenti ante praesent a dui eget nibh eu quam accumsan porttitor tincidunt
                                    ultrices vel auctor aenean placerat viverra ac vel parturient tristique malesuada hac
                                    conubia sed tincidunt.Quisque a imperdiet suspendisse parturient adipiscing justo sem a
                                    in eros eros luctus a turpis urna sapien ullamcorper vulputate at mi.Dis vestibulum vel
                                    lectus sed vestibulum consectetur vivamus a feugiat pharetra fames ullamcorper adipiscing
                                    condimentum tempor egestas at at lacus.</span>
                                <div class="EmptyBox30"/>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Learn More" styleClass="GreenButton Fleft"/>
                                    </div>
                                </div>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Try Now" styleClass="CyanButton Fleft"/>
                                    </div>
                                </div>
                            </div>
                            <div class="EmptyBox30"/>
                        </div>
                    </div>

                    <div class="Container50 Responsive50">
                        <div class="ContainerIndent">
                            <i class="icon-windows SoftRed Fs60 DispBlock Fleft"/>
                            <div class="Container10 Responsive50"><div class="ContainerIndent"></div></div>
                            <div class="Container70 Responsive50">
                                <h2 class="BoldGray FontRobotoRegular Fs30">4. Usage Datas</h2>
                                <div class="EmptyBox10"/>
                                <h3 class="BoldGray FontRobotoLight Fs20">Monitor the app ecosystem and your competitors.</h3>
                                <div class="EmptyBox20"/>
                                <span class="BoldGray Fs14 FontRobotoLight">Vitae potenti ante praesent a dui eget nibh eu quam accumsan porttitor tincidunt
                                    ultrices vel auctor aenean placerat viverra ac vel parturient tristique malesuada hac
                                    conubia sed tincidunt.Quisque a imperdiet suspendisse parturient adipiscing justo sem a
                                    in eros eros luctus a turpis urna sapien ullamcorper vulputate at mi.Dis vestibulum vel
                                    lectus sed vestibulum consectetur vivamus a feugiat pharetra fames ullamcorper adipiscing
                                    condimentum tempor egestas at at lacus.</span>
                                <div class="EmptyBox30"/>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Learn More" styleClass="GreenButton Fleft"/>
                                    </div>
                                </div>
                                <div class="Container50 Responsive50 ui-fluid">
                                    <div class="ContainerIndent">
                                        <p:commandButton value="Try Now" styleClass="CyanButton Fleft"/>
                                    </div>
                                </div>
                            </div>
                            <div class="EmptyBox30"/>
                        </div>
                    </div>

                </div>
            </div>

            <div class="EmptyBox50"/>

        </div>

        <!-- -->

        <div class="Container100 BoldGrayBack" id="rio-infoArea" style="padding:0px 3rem; box-sizing:border-box;">

            <div class="EmptyBox80"/>

            <h1 class="FontRobotoRegular Fs30 White TexAlCenter">Try Now !</h1>
            <div class="EmptyBox30"/>

            <div class="Wid90 OvHidden MarAuto">
                <div class="Container100">

                    <div class="Wid70 WidAutoOnMobile MarAuto White Fs20 TexAlCenter FontRobotoLight">Create your free account to get access to historical ranks and reviews<br />
                        To check out just top charts and daily ranks, go to Store Stats now !
                        <div class="EmptyBox20"/>
                        <p:commandButton value="Create Free Account Now" styleClass="CyanButton"/>
                    </div>

                </div>
            </div>

            <div class="EmptyBox50"/>

        </div>

        <!-- -->

        <div class="Container100 " id="rio-pricingtables" style="background-color:#F0F2F5; padding:0px 3rem; box-sizing:border-box;">

            <div class="EmptyBox80"/>

            <h1 class="FontRobotoRegular Fs30 BoldGray TexAlCenter">Pricing Tables</h1>
            <div class="EmptyBox30"/>

            <div class="Wid90 MarAuto Responsive100  ">

                <div class="Container25 TexAlCenter Responsive50 ">
                    <div class="ContainerIndent">
                        <div class="Card ShadowEffect">
                            <div class="EmptyBox20"/>
                            <div class="Container100 FontDosisSemibold BoldGray" style="font-size:1.4rem;">Standard</div>
                            <div class="Separator"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Container100 FontRobotoLight BoldGray" style="font-size:3rem;">$2<span class="Fs30 Leaden">/mo*</span></div>
                            <div class="Container100 FontRobotoLight Leaden Fs16">Basic customer support for<br /> small business</div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Separator"/>
                            <div class="Container100 FontRobotoLight Leaden Fs16">$25 for monthly</div>
                            <div class="EmptyBox20"/>
                            <div class="Container100 ui-fluid">
                                <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                            </div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container25 TexAlCenter Responsive50 ">
                    <div class="ContainerIndent">
                        <div class="Card ShadowEffect">
                            <div class="EmptyBox20"/>
                            <div class="Container100 FontDosisSemibold Orange" style="font-size:1.4rem;">Pro</div>
                            <div class="Separator"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Container100 FontRobotoLight BoldLeaden" style="font-size:3rem;">$3<span class="Fs30 Leaden">/mo*</span></div>
                            <div class="Container100 FontRobotoLight Leaden Fs16">All-in-one customer support<br /> for small business</div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Separator"/>
                            <div class="Container100 FontRobotoLight Leaden Fs16">$35 for monthly</div>
                            <div class="EmptyBox20"/>
                            <div class="Container100 ui-fluid">
                                <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="OrangeButton Fleft"/>
                            </div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container25 TexAlCenter Responsive50 ">
                    <div class="ContainerIndent">
                        <div class="Card ShadowEffect">
                            <div class="EmptyBox20"/>
                            <div class="Container100 FontDosisSemibold BoldGray" style="font-size:1.4rem;">Business</div>
                            <div class="Separator"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Container100 FontRobotoLight BoldGray" style="font-size:3rem;">$15<span class="Fs30 Leaden">/mo*</span></div>
                            <div class="Container100 FontRobotoLight Leaden Fs16">Business class customer <br />support + One to one help</div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Separator"/>
                            <div class="Container100 FontRobotoLight Leaden Fs16">$155 for monthly</div>
                            <div class="EmptyBox20"/>
                            <div class="Container100 ui-fluid">
                                <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                            </div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container25 TexAlCenter Responsive50 ">
                    <div class="ContainerIndent">
                        <div class="Card ShadowEffect">
                            <div class="EmptyBox20"/>
                            <div class="Container100 FontDosisSemibold BoldGray" style="font-size:1.4rem;">Business Plus</div>
                            <div class="Separator"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Container100 FontRobotoLight BoldGray" style="font-size:3rem;">$50<span class="Fs30 Leaden">/mo*</span></div>
                            <div class="Container100 FontRobotoLight Leaden Fs16">Business class customer <br />support + One to one help</div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="Separator"/>
                            <div class="Container100 FontRobotoLight Leaden Fs16">$555 for monthly</div>
                            <div class="EmptyBox20"/>
                            <div class="Container100 ui-fluid">
                                <p:button value="Get Started" outcome="/promotion-page.xhtml" styleClass="GreenButton Fleft"/>
                            </div>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                        </div>
                    </div>
                </div>

            </div>

            <div class="EmptyBox50"/>

        </div>

        <!-- -->

        <div class="Container100 " id="rio-features" style="padding:0px 3rem; box-sizing:border-box;">

            <div class="EmptyBox80"/>

            <h1 class="FontRobotoRegular Fs30 BoldGray TexAlCenter">Features</h1>
            <div class="EmptyBox30"/>

            <div class="Wid90 MarAuto">

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-work3 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">HTML5 &amp; CSS3</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-thumb54 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Cross-Browser</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-iphone SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Responsive</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-brochure6 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Handcrafted</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-browser SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Rock-Solid</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-work3 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">HTML5 &amp; CSS3</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-thumb54 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Cross-Browser</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-iphone SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Responsive</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-brochure6 SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Handcrafted</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

                <div class="Container20 Responsive TexAlCenter">
                    <div class="ContainerIndent">
                        <div class="Container100">
                            <i class="icon-browser SoftBlue Wid100" style="font-size:4rem;"/>
                            <div class="Wid100 OvHidden" style="height:2rem;"/>
                            <div class="FontRobotoRegular LeadenGreen" style="font-size:1.6rem;">Rock-Solid</div>
                            <div class="Wid100 OvHidden" style="height:1rem;"/>
                            <div class="FontRobotoLight BoldGray Fs14">Lorem ipsum dolor sit ametconsetetur sadipscing elitr, sed diam nonumy eirmod tempor
                                invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
                            <div class="Wid100 OvHidden" style="height:3rem;"/>
                        </div>
                    </div>
                </div>

            </div>

            <div class="EmptyBox50"/>

        </div>

        <!-- -->

        <div class="Container100 " id="rio-customers" style="background-color:#F0F2F5; padding:0px 3rem; box-sizing:border-box;">

            <div class="EmptyBox80"/>

            <h1 class="FontRobotoRegular Fs30 BoldGray TexAlCenter">Hundreds Of Thousands Of Customers Trust Us !</h1>
            <div class="EmptyBox30"/>
            <div class="Wid80 MarAuto">

                <div class="Container33 Responsive50">
                    <div class="ContainerIndent">
                        <div class="Container100 TexAlCenter">
                            <div class="EmptyBox20"/>
                            <img src="#{resource['rio-layout:images/avatar1.svg']}" style="width:150px; height:150px;" />
                            <div class="EmptyBox20"/>
                            <span class="DispBlock BoldGray FontRobotoLight">"We realized Rio was a great tool that would give us more insights
                                on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                            <div class="EmptyBox20"/>
                            <span class="FontRobotoRegular DispBlock BoldGray">—Luke Skywalker, Vice President of Operations</span>
                        </div>
                    </div>
                </div>
                <div class="Container33 Responsive50">
                    <div class="ContainerIndent">
                        <div class="Container100 TexAlCenter">
                            <div class="EmptyBox20"/>
                            <img src="#{resource['rio-layout:images/avatar2.svg']}" style="width:150px; height:150px;" />
                            <div class="EmptyBox20"/>
                            <span class="DispBlock BoldGray FontRobotoLight">"We realized Rio was a great tool that would give us more insights
                                on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                            <div class="EmptyBox20"/>
                            <span class="FontRobotoRegular DispBlock BoldGray">—Luke Skywalker, Vice President of Operations</span>
                        </div>
                    </div>
                </div>
                <div class="Container33 Responsive50">
                    <div class="ContainerIndent">
                        <div class="Container100 TexAlCenter">
                            <div class="EmptyBox20"/>
                            <img src="#{resource['rio-layout:images/avatar1.svg']}" style="width:150px; height:150px;" />
                            <div class="EmptyBox20"/>
                            <span class="DispBlock BoldGray FontRobotoLight">"We realized Rio was a great tool that would give us more insights
                                on both a strategic and technical level, so we could make more intelligent business decisions."</span>
                            <div class="EmptyBox20"/>
                            <span class="FontRobotoRegular DispBlock BoldGray">—Luke Skywalker, Vice President of Operations</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="EmptyBox80"/>

        </div>

        <!-- -->

        <div class="Container100  TealBack" id="rio-contact">
            <p:gmap center="40.701176, -74.006322" zoom="14" type="ROADMAP" style="width:100%;height:600px;" />

            <div class="Wid100 PosRelative MarAuto OvHidden" style="background-color:rgba(255,255,255,0.7);">
                <div class="Container100 TexAlCenter">
                    <div class="Wid100 OvHidden" style="height:2rem;"/>
                    <div class="Wid100 MarAuto DispBlock OvHidden FontRobotoRegular Blue" style="font-size:2.0rem;">We Are Here !</div>
                    <div class="Wid100 OvHidden" style="height:0.5rem;"/>
                    <div class="Wid100 MarAuto DispBlock OvHidden FontRobotoLight Fs20 Leaden">PO Box 16122, Collins Street West, New York 8007, USA</div>
                    <div class="Wid100 OvHidden" style="height:1rem;"/>
                    <div class="Container100 ui-fluid">
                        <p:button value="Contact Us" outcome="/promotion-page.xhtml" styleClass="BlueButton MarAuto" style="max-width:250px;"/>
                    </div>
                    <div class="Wid100 OvHidden" style="height:2rem;"/>
                </div>
            </div>

        </div>

        <!-- FOOTER -->
        <div class="Container100 BoldGrayBack">
            <div class="Container100" style="border-bottom:solid 1px #5B616B;" id="footerlinks">
                <div class="ContainerIndent OvHidden">
                    <a href="#" class="DispInlBlock FontRobotoLight White Fs14 Fleft HoverEffect">TERMS OF CONDITIONS</a>
                    <span class="DispInlBlock Fleft Fs14 White" style="padding:0px 10px;">|</span>
                    <a href="#" class="DispInlBlock FontRobotoLight White Fs14 Fleft HoverEffect">SITEMAP</a>
                    <span class="DispInlBlock Fleft Fs14 White" style="padding:0px 10px;">|</span>
                    <a href="#" class="DispInlBlock FontRobotoLight White Fs14 Fleft HoverEffect">PRIVACY</a>
                    <span class="DispInlBlock Fleft Fs14 White" style="padding:0px 10px;">|</span>
                    <a href="#" class="DispInlBlock FontRobotoLight White Fs14 Fleft HoverEffect">LINKING POLICY</a>

                    <div class="EmptyBox10 ShowOnMobile"/>
                    <span class="DispInlBlock FontRobotoLight White Fs14 Fright HoverEffect TexAlRight FloatNoneOnMobile"> PrimeFaces Rio Theme And Layout</span>
                </div>
            </div>

            <div class="Container100">
                <div class="ContainerIndent OvHidden">
                    <img src="#{resource['rio-layout:images/logo.svg']}" style="height:20px;" class="Fleft" />
                    <span class="DispInlBlock FontRobotoLight White Fs12 Fright HoverEffect TexAlRight">+1 888 123 4567 <br /> info@riorio.com
                        <br /><br /> Copyright &#169; 2015 <i class="icon-primitive-dot Fs10 White"/> All rights reserved.</span>
                </div>
            </div>

            <div class="EmptyBox30"/>
        </div>

        <script>
            // FNC for detecting for click outside of any elements ==============
            $.fn.clickOff = function (callback, selfDestroy) {
                var clicked = false;
                var parent = this;
                var destroy = selfDestroy || true;

                parent.click(function () {
                    clicked = true;
                });

                $(document).click(function (event) {
                    if (!clicked) {
                        callback(parent, event);
                    }
                    if (destroy) {
                    }
                    ;
                    clicked = false;
                });
            };

            var menubtn = $(document.getElementById("menu-button")),
                    menubody = $(document.getElementById("menubody")),
                    menustatus = true,
                    menuButtonClick = false;

            menubtn.on("click", function () {
                menuButtonClick = true;

                if (menustatus) {
                    menubody.addClass('active');
                    menustatus = false;
                } else {
                    menubody.removeClass('active');
                    menustatus = true;
                }
            });

            menubody.clickOff(function (e) {
                if (menuButtonClick) {
                    menuButtonClick = false;
                }
                else {
                    menubody.removeClass('active');
                    menustatus = true;
                }
            });
        </script>
    </h:body>
</html>